<!--  -->
<template>
  <div>
    <h2>这是测试页面 - Test1</h2>
    <el-input-number v-model="num"></el-input-number>
    <p>{{ num }}</p>
    <!-- <ElSelectLoadMore
      multiple
      v-model="test"
      filterable
      clearable
      :mayNotExistOptions="hx2"
      remote
      :remote-method="onFilter"
      :page-option="data.page"
      @current-page="currentPage"
    >
      <el-option v-for="(item, key) in data.list" :key="key" :label="item.name" :value="item.id"></el-option>
    </ElSelectLoadMore> -->
    <h3>{{ test }}</h3>
    <ElSelectLoadMore
      v-model="ddd.hx"
      filterable
      clearable
      :mayNotExistOptions="ddd.hxName"
      remote
      :remote-method="onFilter"
      :page-option="data.page"
      @current-page="currentPage"
    >
      <el-option v-for="(item, key) in data.list" :key="key" :label="item.name" :value="item.id"></el-option>
    </ElSelectLoadMore>
    <h3>{{ test }}</h3>
  </div>
</template>
<script setup lang="ts" name="test2Index2">
import ElSelectLoadMore from '@/components/base-ui/ElSelectLoadMore.vue'
const num = ref(0)

const test = ref<any>(undefined)

const data = reactive({
  list: [] as any,
  page: { current: 1, size: 10, total: 10 },
  condition: { name: '' }
})

let hx = { value: '2_5', label: 'name_2_5' }
let ddd = reactive({
  hx: '',
  hxName: ''
})
let hx2 = [{ value: '2_5', label: 'name_2_5' }, { value: '3_5', label: 'name_3_5' }]
onMounted(() => {
  setTimeout(() => {
    test.value = hx.value
    ddd.hx = '2_5'
    ddd.hxName = 'name_2_5'
  }, 1000);
  // test.value = hx2.map(item => item.value)
})

const currentPage = (e: number) => {
  data.page.current = e
  getData()
}

const getData = () => {
  console.log('-getData-')
  let sendData = {
    page: data.page
  }
  let arr = [] as any
  for (let i = 0; i < sendData.page.size; i++) {
    arr.push({
      id: `${sendData.page.current}_${i}`,
      name: `name_${sendData.page.current}_${i}`
    })
  }
  if (data.page.current === 1) {
    data.list = []
  }
  if (data.condition.name) {
    arr = arr.filter(item => item.name.includes(data.condition.name))
    console.log(arr)
  }
  data.list = [...data.list, ...arr]
  data.page.total = 10086
}
getData()
const onFilter = (e) => {
  data.page.current = 1
  data.condition.name = e
  getData()
}

</script>
<style scoped lang="scss"></style>